<script setup lang='ts'>
import axios from 'axios';
import { ref } from 'vue';
import { jsx } from 'vue/jsx-runtime';


const name = ref('ceshi01')
const password = ref('123456')
const login = async () => {
    const res = await axios.post('https://meikou-api.itheima.net/login', {
        account: name.value,
        password: password.value
    })
    alert(JSON.stringify(res))
}

</script>

<template>
    <div class="container">
        <div class="loginCase">
            <input type="text" placeholder="请输入同户名" v-model="name">
            <input type="password" placeholder="请输入密码" v-model="password">
            <button @click="login()">登录</button>
        </div>
    </div>

</template>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.container {
    width: 100vw;
    height: 100vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.loginCase {
    width: 400px;
    height: 300px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 10px;
}

.loginCase input,
button {
    margin: 10px auto;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
}
</style>